<template>
  <el-row justify="space-between" :gutter="20">
    <el-col :span="5" :offset="2">
      <router-link class="logo" to="/home">
        <img height="50" src="http://s1.bdstatic.com/r/www/cache/mid/static/xueshu/img/logo_new_ff7641d.png" alt="">
      </router-link>
    </el-col>
    <el-col :span="5">
      <el-input class="cus-searchbox" v-model="input" placeholder="搜索"></el-input>
    </el-col>
    <el-col style="float:right" :span="10">
      <el-menu class="cus-menu" mode="horizontal" :default-active="activeIndex">
        <el-menu-item index="1">查询学术成果</el-menu-item>
        <el-menu-item index="2">关于本站</el-menu-item>
        <el-menu-item disabled class="cus-badge" index="3">
          <span class="gap">
            |
          </span>
        </el-menu-item>

        <el-menu-item class="cus-badge" index="5">
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-setting"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>搜索设置</el-dropdown-item>
              <el-dropdown-item>意见反馈</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>

        <el-menu-item class="cus-badge" index="6">
          <el-dropdown>
            <span class="el-dropdown-link">
              pedro
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>我的主页</el-dropdown-item>
              <el-dropdown-item>用户中心</el-dropdown-item>
              <el-dropdown-item>账号设置</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      input: ''
    };
  }
};
</script>

<style lang="scss" scoped>
.logo {
  padding: 0;
  margin: 0;
}

.cus-badge {
  border-bottom: none !important;
}
.cus-menu {
  border-bottom: none;
  line-height: 80px;
  font-family: 微软雅黑;
  font-weight: 600;
  .gap {
    position: relative;
    // padding: 0 20px;
  }
}

.cus-searchbox {
  padding: 0 auto;
  margin-top: 10px;
}
</style>
